<template>
	<view>
		<view class="t-content">
			<view class="t-box">
				<img v-for="url in headUrlList" class="t-img" :src="url" />
				<img class="t-img" :src="addImg.src" />
			</view>
			<view class="t-click">
				<view @click="toAllPeople">查看更多群成员</view>
				<view>
					<image :src="rightImg.src" class="t-h-img"></image>
				</view>
			</view>
		</view>
		<view>
			<view class="t-list-box">
				<u-cell-group>
					<u-cell-item title="我的ID号" :value="userInfo.userId" :arrow="false">
						<u-icon @click="copyUserId" style="margin-left: 5px;" slot="right-icon" size="34"
							name="order"></u-icon>
					</u-cell-item>
					<u-cell-item title="我的钱包" :value="userInfo.amount"></u-cell-item>
					<u-cell-item title="我的接单区域" @click="openArea">
						<input ref="phoneIput" :value="userInfo.areaName" placeholder="请选择接单区域" :disabled="true" />
					</u-cell-item>
					<u-cell-item title="我的个人资料" @click="toUcenter">

					</u-cell-item>
				</u-cell-group>
			</view>
			<view class="t-cell-box" @click="toUcenter">
				<view class="t-cell-content">
					<view>
						<img class="t-cell-img" :src="userInfo.avatar" />
					</view>
					<view>
						{{userInfo.userName}}
					</view>
				</view>
			</view>
		</view>
		<view>
			<u-popup v-model="areaShow" mode="bottom" :closeable="true" @close="closeArea">
				<view style="p-content">
					<view class="p-top">选择甩单总群</view>
					<view class="p-search">
						<u-search placeholder="输入内容搜索" bg-color="#ededed" @change="change" @search="search"
							v-model="keyword" :show-action="false" clearable></u-search>
					</view>
					<view style="height: 50vh;margin-top: 20rpx;">
						<u-cell-group>
							<u-cell-item v-for="(item, index) in indexList" :arrow="false" :title="item.areaName"
								:key="index" @click="chooseArea(item)">
							</u-cell-item>
						</u-cell-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getHost,
		ucenterApis
	} from '@/apis/index';
	export default {
		onLoad(object) {
			console.log(object)
			if (object.peolpeAreaShow == "1") {
				this.areaShow = true
			}

			let userInfo = this.$store.state.wxUser;

			this.userInfo = userInfo

			let areaList = uni.getStorageSync('areaList');

			//头像列表
			this.headUrlList = uni.getStorageSync('headUrlList');

			this.allIndexList = areaList;
			this.indexList = areaList;

			wx.setNavigationBarTitle({
				title: '群成员（' + this.headUrlList.length + ")"
			})
		},
		data() {
			return {
				headUrlList: [],
				userInfo: {
					userId: '96584',
					amount: '￥',
					areaName: '',
					userName: '把菜',
					avatar: ''
				},
				keyword: '',
				areaShow: false,

				headImg: {
					src: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png'
				},
				rightImg: {
					src: '../../static/imgs/right.png'
				},
				addImg: {
					src: '../../static/imgs/add.png'
				},
				allIndexList: [],
				indexList: []
			}
		},
		methods: {
			copyUserId() {
				var _this = this
				// 使用uni.setClipboardData进行复制操作
				let textToCopy = _this.userInfo.userId + ''
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			toAllPeople() {
				uni.navigateTo({
					url: '../allpeople/allpeople'
				});
			},

			toUcenter() {
				uni.navigateTo({
					url: '../ucenter/updateUser/updateUser'
				});
			},

			openArea() {
				this.areaShow = true;
			},

			closeArea() {
				this.areaShow = false;
			},

			chooseArea(item) {
				let that = this

				that.areaName = item.areaName

				//更新个人区域
				let user = {
					areaId: item.id
				}

				ucenterApis.updateUserInfo(user).then((res) => {
					//更新区域缓存
					that.$store.dispatch('setAreaId', item.id);
					that.$store.dispatch('setAreaName', item.areaName);

					setTimeout(function() {
						that.areaShow = false;
					}, 500)
				})



			},

			search() {
				let _that = this
				_that.indexList = _that.allIndexList.filter((item) => item.areaName.includes(_that.keyword))
			},

			change() {
				let _that = this
				_that.indexList = _that.allIndexList.filter((item) => item.areaName.includes(_that.keyword))
			},
		}
	}
</script>

<style lang="scss" scoped>
	.t-content {
		width: 100%;
		background-color: white;
		margin-top: 15px;
		border-radius: 15px;
		border-bottom: solid #eeeeee 1px;
		// padding-left: 10px;
		padding-top: 5px;
		padding-right: 10px;
		// text-align: center;
		display: flex;
		flex-direction: column;
		// flex-wrap: wrap;
		justify-content: space-between;
	}

	.t-box {
		padding-left: 8px;
	}

	.t-img {
		margin-left: 12px;
		margin-top: 10px;
		height: 48px;
		width: 48px;
		border-radius: 4px;
	}

	.t-h-img {
		width: 25rpx;
		height: 25rpx;
		position: relative;
		top: 5rpx;
		left: 8rpx;
	}

	.t-cell-box {
		position: absolute;
		text-align: right;
		width: 100%;
	}

	.t-cell-content {
		display: flex;
		justify-content: flex-end;
		position: relative;
		right: 36px;
		top: -41px;
		font-size: 14px;
		line-height: 26px;
		color: #ababab;
	}

	.t-cell-img {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 5px;
		margin-top: 1px;
	}

	.t-click {
		display: flex;
		justify-content: center;
		color: #ababab;
		font-size: 15px;
		line-height: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.t-list-box {
		margin-top: 10px;
		background-color: white;
	}


	.p-selected {
		background-color: #c8e6c9;
	}

	.p-content {
		// height: 700px;
		// display: flex;
	}

	.p-send-top {
		margin-top: 22rpx;
		margin-left: 22rpx;
		font-size: 12px;
		line-height: 20px;
		color: #009688;
	}

	.p-top {
		margin-top: 22rpx;
		margin-left: 22rpx;
		font-size: 14px;
		line-height: 20px;
	}

	.p-search {
		padding: 20rpx;
		margin-top: 50rpx;
	}
</style>